<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#tab{
				width: 510px;
				height: 500px;
				border: 3px solid red;
				margin: 20px auto;
				position: relative;
			}
			#tab ul li{
				width: 160px;
				height: 50px;
				list-style: none;
				margin: 5px;
				float: left;
				text-align: center;
				line-height: 50px;
				cursor: pointer;
			}
			.con{
				width: 460px;
				height: 400px;
				position: absolute;
				top: 70px;
				left: 20px;
				display: none;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				//1.抓元素
				var lis = document.getElementsByTagName('li');
				var cons = document.getElementsByClassName('con');
				//2.给每一个li加上鼠标移入事件
				for (var i=0;i<lis.length;i++) {
					//4.加上一个属性 赋值序号
					lis[i].index = i;
					//3.
					lis[i].onmouseover = function(){
//						alert(this.index);序号
						//6.让所有con隐藏 5.6两部就是让当前div显示 兄弟div影藏
						for (var j=0;j<cons.length;j++) {
							cons[j].style.display = 'none';
						}
						//5.让当前div显示
						cons[this.index].style.display = 'block';
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="tab">
			<ul>
				<li style="background: red;">热门活动</li>
				<li style="background: wheat;">绅士男士</li>
				<li style="background: cyan;">女装内衣</li>
			</ul>
			<div class="con" style="background: red; display: block;"></div>
			<div class="con" style="background: wheat;"></div>
			<div class="con" style="background: cyan;"></div>
		</div>
	</body>
</html>
